<template>
  <div>
    <el-form
      :model="payAisleForm"
      :rules="payAisleRules"
      ref="payAisleForm"
      size="small"
      label-width="120px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="通道名称:" prop="aisleName">
            <el-input
              size="small"
              v-model="payAisleForm.aisleName"
              placeholder="请输入通道名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="通道别名:" prop="aisleAlias">
            <el-input
              size="small"
              v-model="payAisleForm.aisleAlias"
              placeholder="请输入通道别名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="通道机构号:" prop="cerId">
            <el-input
              size="small"
              v-model="payAisleForm.cerId"
              placeholder="请输入通道机构号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="平台服务编号:" prop="coOperatorNo">
            <el-input
              size="small"
              v-model="payAisleForm.coOperatorNo"
              placeholder="请输入平台服务编号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="通道类型:" prop="aisleType">
            <el-select
              class="width-100"
              size="small"
              v-model="payAisleForm.aisleType"
              placeholder="请选择通道类型"
            >
              <el-option
                v-for="item in aisleTypeList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人:" prop="linkman">
            <el-input
              size="small"
              v-model="payAisleForm.linkman"
              placeholder="请输入联系人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话:" prop="contactNumber">
            <el-input
              size="small"
              type="number"
              maxlength="11"
              v-model="payAisleForm.contactNumber"
              placeholder="请输入联系电话"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="省份/地市/区县:" prop="provinceCityArea">
            <el-cascader
              v-if="isShow"
              class="width-100"
              v-model="payAisleForm.provinceCityArea"
              :options="provinceCityAreaOptions"
              :props="provinceCityAreaProps"
              placeholder="请选择省份/地市/区县"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="联系地址" prop="address">
            <el-input
              size="small"
              type="textarea"
              v-model="payAisleForm.address"
              placeholder="请输入联系地址"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="邮箱:" prop="email">
            <el-input
              size="small"
              type="email"
              v-model="payAisleForm.email"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合作状态:" prop="isCooperate">
            <el-select
              class="width-100"
              size="small"
              v-model="payAisleForm.isCooperate"
              placeholder="请选择合作状态"
            >
              <el-option
                :label="item.dictValue"
                :value="item.dictKey"
                v-for="item in isCooperateList"
                :key="item.dictKey"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分润状态:" prop="profitState">
            <el-select
              class="width-100"
              size="small"
              v-model="payAisleForm.profitState"
              placeholder="请选择分润状态"
            >
              <el-option
                :label="item.dictValue"
                :value="item.dictKey"
                v-for="item in profitStateList"
                :key="item.dictKey"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同状态:" prop="cooperateState">
            <el-select
              class="width-100"
              size="small"
              v-model="payAisleForm.cooperateState"
              placeholder="请选择合同状态"
            >
              <el-option
                :label="item.dictValue"
                :value="item.dictKey"
                v-for="item in cooperateStateList"
                :key="item.dictKey"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="异常状态原因:" prop="exceptionMsg">
            <el-input
              size="small"
              type="text"
              v-model="payAisleForm.exceptionMsg"
              placeholder="请输入异常状态原因"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template slot-scope="" slot="companiesForm">
      <div class="pay-company-box">
        <div
          class="pay-company-item"
          v-for="item in companyList"
          :key="item.id"
        >
          <span>{{ item.compName }}</span>
          <el-switch
            v-model="item.value"
            :disabled="item.disabled"
            active-color="#a1c4fd"
            inactive-color="#e2ebf0"
          >
          </el-switch>
        </div>
      </div>
    </template>
    <template slot-scope="row" slot="functionsForm">
      <div class="pay-company-box">
        <div
          class="pay-company-item"
          v-for="item in row.column.dicData"
          :key="item.id"
        >
          <span>{{ item.functionName }}</span>
          <el-switch
            v-model="item.value"
            :disabled="item.disabled"
            active-color="#a1c4fd"
            inactive-color="#e2ebf0"
          >
          </el-switch>
        </div>
      </div>
    </template>
    <template slot-scope="" slot="areasForm">
      <haruyukiCascader
        :isShow="isShow"
        :cascaderValue="provCityData"
        placeholder="请选择可发展区域"
        :disabled="isTreeDis"
        ref="toCascader"
      />
    </template>
    <template slot-scope="scope" slot="aisleButtonForm">
      <div class="pay-company-box pay-justify-content">
        <el-button
          icon="el-icon-circle-check"
          type="primary"
          @click="handleAisleSubmit()"
          >提 交</el-button
        >
        <el-button icon="el-icon-set-up" @click="handleEdit(scope)"
          >编 辑</el-button
        >
      </div>
    </template>
    <template slot-scope="scope" slot="compButtonForm">
      <div class="pay-company-box pay-justify-content">
        <el-button
          icon="el-icon-circle-check"
          type="primary"
          @click="handleCompSubmit()"
          >提 交</el-button
        >
        <el-button icon="el-icon-set-up" @click="handleEdit(scope)"
          >编 辑</el-button
        >
      </div>
    </template>
    <template slot-scope="scope" slot="funcButtonForm">
      <div class="pay-company-box pay-justify-content">
        <el-button
          icon="el-icon-circle-check"
          type="primary"
          @click="handleFuncSubmit()"
          >提 交</el-button
        >
        <el-button icon="el-icon-set-up" @click="handleEdit(scope)"
          >编 辑</el-button
        >
      </div>
    </template>
    <template slot-scope="scope" slot="areaButtonForm">
      <div class="pay-company-box pay-justify-content">
        <el-button
          icon="el-icon-circle-check"
          type="primary"
          @click="handleTreeSubmit()"
          >提 交</el-button
        >
        <el-button icon="el-icon-set-up" @click="handleEdit(scope)"
          >编 辑</el-button
        >
      </div>
    </template>
  </div>
</template>

<script>
import { getDictionary, getRegion } from "@/api/system/dict";

export default {
  props: {
    basicForm: Object,
  },
  data() {
    return {
      payAisleRules: {
        tenantName: [
          { required: true, message: "请输入租户名称", trigger: "blur" },
        ],
        tenantType: [
          { required: true, message: "请选择租户类型", trigger: "blur" },
        ],
        linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        contactNumber: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        provinceCityArea: [
          { required: true, message: "请选择省份/地市/区县", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入联系地址", trigger: "blur" },
        ],
        isCooperate: [
          { required: true, message: "请选择合作状态", trigger: "blur" },
        ],
        profitState: [
          { required: true, message: "请选择分润状态", trigger: "blur" },
        ],
        cooperateState: [
          { required: true, message: "请选择合同状态", trigger: "blur" },
        ],
        domain: [
          { required: true, message: "请输入域名地址", trigger: "blur" },
        ],
        // backgroundUrl: [
        //   { required: true, message: "请上传系统背景", trigger: "blur" },
        // ],
      },
      aisleTypeList: [],
    };
  },
  created() {
    this.doGetDicts();
  },
  methods: {
    /* 字典 */
    doGetDicts() {
      getDictionary({code: "aisle_type"}).then((res) => {
        this.aisleTypeList = res.data.data;
      });
    },
  }
};
</script>

<style>
</style>